<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar id="nav" title="记事本" :class="bg">
      <template #right>
        <van-icon name="wap-nav" size="28px" @click="show = true" />
      </template>
    </van-nav-bar>
    <!-- 输入框提交代办事项 -->
    <van-search v-model="value" placeholder="代办事项" left-icon show-action @search="add">
      <template #action>
      </template>
      
    </van-search>
    <!-- 代办事项内容 -->
    <list></list>
    <!-- 弹出层 -->
    <van-popup v-model="show" position="left" :style="{ height: '50%', width:'60%'}">
      <van-button id="btn" color="blue" plain @click="bg = 'blue'">蓝色</van-button>
      <van-button id="btn" color="lime" plain @click="bg = 'lime'">绿色</van-button>
      <van-button id="btn" color="red" plain @click="bg = 'red'">红色</van-button>
      <van-button id="btn" color="pink" plain @click="bg = 'pink'">粉色</van-button>
      <van-button id="btn" color="yellow" plain @click="bg = 'yellow'">黄色</van-button>
      <van-button id="btn" color="orange" plain @click="bg = 'orange'">橙色</van-button>
      <van-button id="btn" type="primary" @click="search">编辑数据</van-button>
    </van-popup>
  </div>
</template>
<script>
import list from "../components/list";
export default {
  components: {
    list,
  },
  data() {
    return {
      value: "",
      show: false,
      bg: "pink",
    };
  },
  methods: {
    add() {
      var obj = {
        title: this.value,
        state: 0,
        time: new Date(),
      };
      this.$store.commit("add", obj);
      this.value = "";
    },
    search() {
      this.$router.push({ path: "search" });
    },
  },
};
</script>
<style scoped>
#nav {
  height: 60px;
color: red;

}
.van-nav-bar.blue {
  background-color: blue !important;
}
.van-nav-bar.lime {
  background-color: lime !important;
}
.van-nav-bar.red {
  background-color: red !important;
}
.van-nav-bar.pink {
  background-color: pink !important;
}
.van-nav-bar.yellow {
  background-color: yellow !important;
}
.van-nav-bar.orange {
  background-color: orange !important;
}
#btn {
  float: left;
  margin-top: 10px;
  margin-left: 40px;
}
</style>